<template>
  <div class="container-head">
    <!-- 按钮集合 -->
    <section class="buttons">
      <div>
        <el-button type="success" style="margin-left: 10px" @click="onSave"><i class="el-icon-s-claim el-icon--left" />
          保存
        </el-button>
        <el-button type="danger" style="margin-left: 10px" @click="onBack">返回</el-button>
        <!-- <el-button @click="reloads">重置</el-button> -->
        <el-button @click="catJson">查看JSON </el-button>
        <el-button @click="$refs.file.click()">导入JSON </el-button>
        <el-button @click="exportJSON">导出JSON </el-button>
        <input id="file" ref="file" type="file" accept=".json" style="display: none" @change="importJSON" />
      </div>
    </section>
  </div>
</template>

<script>
import { ref, defineComponent, computed, watch } from 'vue';
export default defineComponent({
  props: {
    datas: {
      type: Object
    }
  },
  setup (props, { emit }) {
    const catJson = () => {
      console.log('查看JSON');
      emit('onHandler', 'cat');
    }
    const importJSON = () => {
      console.log('导入JSON');
      emit('onHandler', 'import');
    }
    const exportJSON = () => {
      console.log('导出JSON');
      emit('onHandler', 'export');
    }
    const onSave = () => {
      emit('onHandler', 'save');
    }
    const onBack = () => {
      console.log('返回');
      emit('onHandler', 'back');
    }
    return {
      onBack,
      onSave,
      catJson,
      importJSON,
      exportJSON
    }
  }
})
</script>

<style lang="scss">
.container-head {
  .buttons {
    height: 5%;
    border-bottom: 1px solid #ebedf0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    padding: 15px;
    float: right;
    /* 下拉 */
    .frop {
      padding-right: 15px;
      .el-button.el-button--primary.el-dropdown-selfdefine {
        background: #fff;
        color: #000;
        border: 1px solid #dcdee0;
      }
    }
    .el-button {
      font-size: 14px;
      padding: 0 16px;
      height: 30px;
      &.el-button--primary {
        background: #155bd4;
      }
      &.el-button--danger {
        background: red;
      }
    }
  }
}
</style>